<template>
	<view>
		<view>
			<view v-if="subscribeList.length">
				<view class="cqg" v-for="item in subscribeList" :key="item.id">
					<uni-card :is-shadow="false" :border="false" :padding="0" :margin="0">
						<uni-list>
							<uni-list-item>
								<template v-slot:header>
									<view class="slot-box">
										<image class="slot-image" :src="item.avatar[0]" mode="widthFix">
										</image>
									</view>
								</template>
								<template v-slot:body>
									<view class="v-slot-body">
										<view class="v-slot-body-row1"> {{item.real_name}}({{item.cleaner_level_name}})
										</view>
										<view class="v-slot-body-row2">
											<view class="v-slot-body-row2-shoucang">
												<image class="img-14" :src="imgUrl1" mode="aspectFit" />
												<text>{{item.score}}</text>
											</view>
											<view class="v-slot-body-row2-fuwu">
												<text>已服务 {{item.services_num}}</text>
											</view>
											<view class="v-slot-body-row2-jvli">
												<image class="img-14" :src="imgUrl5" mode="aspectFit" />
												<text>{{item.distance}}</text>
											</view>

										</view>
										<view class="v-slot-body-row3">
											<view class="v-slot-body-row3-pinglun">
												<image class="img-14" :src="pinglun" mode="aspectFit"
													@click="pingjiaClick(item.cleaner_id)" />
												<text>{{item.evaluate_num}}</text>
											</view>
											<view class="v-slot-body-row3-dianzan">
												<image class="img-14" :src="item.collection ? shouchangXz : shouchang"
													@click="shouchangClick(item)" mode="aspectFit" />
												<text>{{item.collection_num || 0}}</text>
											</view>
											<view class="v-slot-body-row3-yuyue">
												<button class="order-btn " type="default"
													@click="cancelOrderCleaner(item)">取消</button>
											</view>
										</view>
									</view>
								</template>
							</uni-list-item>
						</uni-list>
					</uni-card>
				</view>

			</view>
			<view class="zanWuXiaoxiImg" v-else>
				<image :src="imgUrl" mode=""></image>
				<view class="">
					<text>暂无更多数据</text>
				</view>
			</view>
		</view>
		<!-- 评论弹框 -->

		<uni-popup type="bottom" ref="popup">
			<view class="popup">
				<view class="info-card">
					<uni-card :is-shadow="false" :border="false" :margin="'20rpx'" :spacing="'20rpx'" :padding="0">
						<view class="card-list">
							<view class="c-l-top">
								<image class="c-l-t-img" :src="detailsData.avatar[0]" mode=""></image>
								<view class="c-l-t-con">
									<view class="c-l-t-title">
										<view class="">
											<text style="margin-right: 50rpx;"
												class="c-l-t-name">{{detailsData.real_name || ''}}</text>
											<uni-icons type="phone-filled" color="#33D182" size="16"></uni-icons>
											<text class="c-l-t-name"
												style="margin-left:5rpx;">{{detailsData.phone}}</text>
										</view>
										<view class="c-l-t-info">
											<image class="c-l-t-ioc" :src="imgUrl1" mode=""></image>
											<text class="c-l-t-text">{{detailsData.score || ''}}</text>
										</view>
									</view>
									<text class="c-l-e-text">{{detailsData.cleaner_des || ''}}</text>
								</view>
							</view>
							<view class="c-l-end">
								<view class="c-l-e-kp">
									<image class="img-14" :src="imgUrl4" mode="aspectFit"></image>
									<text class="c-l-e-text">实名认证</text>
								</view>
								<view class="c-l-e-kp">
									<image class="img-14" :src="imgUrl3" mode="aspectFit"></image>
									<text class="c-l-e-text">已培训</text>
								</view>
								<view class="c-l-e-kp">
									<image class="img-14" :src="imgUrl2" mode="aspectFit"></image>
									<text class="c-l-e-text">已考试</text>
								</view>
								<view class="c-l-e-kp">
									<image class="img-14" src="../../../static/imgas/xing.png" mode="aspectFit"></image>
									<text class="c-l-e-text">{{detailsData.cleaner_level}}</text>
								</view>
							</view>
						</view>
					</uni-card>
				</view>
				<view class="list-card">
					<template v-if="commentsData.length != 0">
						<uni-card :is-shadow="false" :border="false" :margin="'20rpx'" :spacing="'0 20rpx'"
							:padding="0">
							<uni-list :border="false">
								<uni-list-item :border="false" :key="index" v-for="(i,index) in commentsData">
									<view slot="body" class="l-c">
										<view class="l-c-top">
											<image class="l-c-img" :src="i.logo[0]" mode=""></image>
											<view class="l-c-title">
												<view class="l-c-name">
													<text class="l-c-text">{{i.hotel_name || ''}}</text>
													<text class="l-c-date">{{i.create_time || ''}}</text>
												</view>
												<view class="l-c-iocn">
													<image class="l-c-i-img" :src="imgUrl1" mode="aspectFit"
														:key="indexa" v-for="(j,indexa) in i.star"></image>
												</view>
											</view>
										</view>
										<view class="l-c-con">
											<text class="l-c-c-text">{{i.content || ''}}</text>
										</view>
										<view class="l-c-end">
											<uni-tag :circle="true" :text="s" :key="indexs"
												v-for="(s,indexs) in i.label"></uni-tag>
										</view>
									</view>
								</uni-list-item>
							</uni-list>
						</uni-card>
					</template>
					<view style="width: 100%;display: flex;flex-direction: column;align-items: center;" v-else>
						<image :src="imgUrl" style="width: 360rpx;margin: 100rpx 0; height: 330rpx;"></image>
						<text style="font-size: 32rpx;font-weight: 500;color: #777777;">暂无数据!</text>
					</view>
				</view>
			</view>
		</uni-popup>
		<!-- 评论弹框 -->
		<!-- 可预约时间 -->

		<!-- 可预约时间 -->
	</view>
</template>
<script>
	export default {
		data() {
			return {
				imgUrl: `${getApp().globalData.imgScr}jd/dingdankongzhuangtai.png`,
				imgUrl1: `${getApp().globalData.imgScr}jd/xinji.png`,
				imgUrl2: `${getApp().globalData.imgScr}jd/yikaoshi.png`,
				imgUrl3: `${getApp().globalData.imgScr}jd/yipeixun.png`,
				imgUrl4: `${getApp().globalData.imgScr}jd/shimingrenzheng.png`,
				imgUrl5: `${getApp().globalData.imgScr}jd/dizhi.png`,
				imgUrl7: `${getApp().globalData.imgScr}jd/yuyueshijian.png`,
				shouchang: `${getApp().globalData.imgScr}jd/shouchang.png`, // 未点赞图片
				shouchangXz: `${getApp().globalData.imgScr}jd/shouchang_xz.png`, // 已点赞图片
				pinglun: `${getApp().globalData.imgScr}jd/pinglun.png`,
				// 订单列表数据
				subscribeList: [],
				total: 0,
				limit: 15,
				page: 1,
				isloading: false,
				tabIndex: 0, // 顶部切换栏状态 0：短期工 1：长期工
				uid: "", // 点击评论的当前列id
				detailsData: {}, // 评论详情数据
				commentsData: [], // 评论数据
				page1: 1, // 评论初始页码
				total1: 0, // 评论数据总条数
				status1: "more", // 评论加载状态
			};
		},

		mounted() {
			let _this = this;
		},
		onShow() {

		},
		methods: {
			// 清空数据的方法
			clearSubscribeList(){
					this.page1 = 1
					this.subscribeList = []
			},
			// 获取位置后请求订单列表
			//触底了
			setReachBottom() {
				if (this.page * this.limit >= this.total) {
					return uni.showToast({
						title: "数据加载完毕！",
						icon: "none"
					})
				}
				//触底后页数增加
				if (this.isloading) return
				this.page++;
				this.getOrderList();
			},
			// 获取订单列表
			getOrderList() {
				let _this = this;
				_this.isloading = true
				const params = {
					cate: 1,
					page: _this.page,
					limit: _this.limit,
					store_latitude: uni.getStorageSync('latitude'),
					store_longitude: uni.getStorageSync('longitude'),
				};
				uni.showLoading({
					title: "加载中...",
					mask: true,
					duration: 2000,
				});
				this.$http
					.post("/index/Hotelorder/order_list", params)
					.then(function(res) {
						_this.isloading = false
						_this.subscribeList = res.data;
						_this.subscribeList = [..._this.subscribeList, ...res.data]
						let obj1 = {};
						_this.subscribeList = _this.subscribeList.reduce((item, index) => {
							obj1[index.id] ? "" : (obj1[index.id] = true && item.push(index));
							return item;
						}, []);
						uni.hideLoading();
					});
			},
			/**
			 * 收藏按钮触发事件
			 * @param {object} data 当前列的数据
			 */
			// 查看人数的收藏
			async shouchangClick(data) {
				let _this = this
				uni.showLoading({
					title: !data.collection ? '收藏中...' : '取消收藏中...',
					mask: true
				})
				try {
					let index = this.tabIndex == 0 ? 2 : this.tabIndex
					let res = await this.$http.post('/index/Hotelorder/collection', {
						cleaner_id: data.cleaner_id,
						cleaner_type: data.cleaner_type
					})
					let rep = await this.$http.get('/index/Hotelcleaner/cleanerinfo', {
						id: data.id
					})
					_this.$set(data, 'collection', !data.collection)
					_this.$set(data, 'collection_num', rep.collection_num)
					uni.hideLoading()
					_this.getOrderList()
					uni.showToast({
						icon: "none",
						title: data.collection ? '收藏成功' : '取消成功'
					})
				} catch (e) {
					uni.hideLoading()
					_this.getOrderList()
					uni.showToast({
						title: e.errMsg,
						icon: "none"
					})

				}
			},
			/**
			 * 评论按钮触发事件
			 * @param {Object} data 当前列数据
			 */
			async pingjiaClick(id) {
				let _this = this;
				this.uid = id;
				try {
					let res = await this.$http.get("/index/Hotelcleaner/cleanerinfo", {
						id: id,
					});
					this.detailsData = res;
					let rep = await this.$http.get(
						"/index/Hotelcleaner/cleaner_evaluatelist", {
							id: id,
							page: 1,
							limit: 10,
						}
					);
					this.commentsData = rep.data;
					this.status1 = this.page1 >= rep.last_page ? "no-more" : "more";
					// 打开弹出层
					uni.hideTabBar({
						animation: true,
						success: function() {
							_this.$refs.popup.open();
						},
					});
				} catch (e) {
					//TODO handle the exception
					uni.showToast({
						title: e.errMsg,
						icon: "none",
					});
				}
			},
			// 删除长期工
			cancelOrderCleaner(item) {
				uni.showLoading({
					title: '删除中...',
					mask: true
				})
				this.$http.post('/index/Hotelorder/del_longworker', {
					id: item.id
				}).then(res => {
					uni.hideLoading()
					this.clearSubscribeList()
					this.getOrderList()
					setTimeout(() => {
						uni.showToast({
							title: '取消成功！'
						})
					}, 300);

				}).catch(res => {
					uni.hideLoading()
					setTimeout(() => {
						uni.showToast({
							title: res.errMsg,
							icon: "none"
						})
					}, 300);


				})
			},
			/**
			 * 评论列表加载更多按钮
			 * @param {Object} e 加载更多的状态
			 */
			async clickLoadMore1(e) {
				if (e.detail.status == "no-more") return;
				this.status1 = "loading";
				this.page1 += 1;
				try {
					let rep = await this.$http.get(
						"/index/Hotelcleaner/cleaner_evaluatelist", {
							id: this.uid,
							page: this.page1,
							limit: 10,
						}
					);
					this.commentsData = [...this.commentsData, ...rep.data];
					this.total1 = rep.total;
					if (this.page1 >= rep.last_page) return (this.status1 = "no-more");
					this.status1 = "more";
				} catch (e) {
					uni.showToast({
						title: e.errMsg,
						icon: "none",
					});
				}
			},
		},
	};
</script>
<style lang="scss">
	// 中间列表区域的样式
	.slot-image {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		margin-right: 10px;
		width: 75px;
		height: 75px;
		border-radius: 15rpx;
	}

	// 统一的 小图片样式
	.img-14 {
		width: 36rpx;
		height: 36rpx;
		margin: 10rpx;
		vertical-align: middle;
	}

	.cqg {
		padding: 18rpx;

		.uni-card {
			margin-bottom: 20rpx;
		}

		.v-slot-body {
			width: 100%;

			&-row1 {
				color: #000;
				font-weight: bold;
				font-size: 30rpx;
				font-family: PingFang-SC-Bold;
			}

			&-row2,
			&-row3 {
				display: flex;
				justify-content: space-between;
				font-size: 26rpx;
				font-family: PingFang-SC-Medium;
			}

			&-row2-shoucang,
			&-row2-fuwu,
			&-row2-jvli,
			&-row3-dianzan,
			&-row3-yuyue {
				display: flex;
				align-items: center;
			}

			.order-btn {
				width: 150rpx;
				height: 50rpx;
				border-radius: 50rpx;
				line-height: 50rpx;
				border: 0;
				background: linear-gradient(-90deg, #8dc9f1, #d8eefc);
				color: #FFFFFF;
				font-size: 30rpx;


			}

			button::after {
				display: none;
			}
		}
	}

	// 弹出层样式
	.popup {
		width: 100%;
		height: 80vh;
		border-radius: 20rpx 20rpx 0 0;
		overflow: auto;
		background-color: #F5F5F5;

		.img-14 {
			width: 36rpx;
			height: 36rpx;
			margin: 10rpx;
		}

		.uni-card {
			border-radius: 20rpx;
		}

		// 保洁详情信息 卡片
		.info-card {
			.card-list {
				display: flex;
				flex-direction: column;

				.c-l-top {
					display: flex;
					align-items: center;

					.c-l-t-img {
						width: 130rpx;
						height: 130rpx;
						border-radius: 20rpx;
						overflow: hidden;
						border: 0;
						margin-right: 20rpx;
					}

					.c-l-t-con {
						flex: 1;
						display: flex;
						flex-direction: column;
						height: 130rpx;

						.c-l-t-title {
							display: flex;
							justify-content: space-between;
							align-items: center;

							.c-l-t-name {
								font-size: 28rpx;
								font-weight: bold;
								color: #000000;
							}

							.c-l-t-info {
								.c-l-t-ioc {
									width: 28rpx;
									height: 28rpx;
									margin-right: 6rpx;
								}

								.c-l-t-text {
									font-size: 28rpx;
									font-weight: 500;
									color: #FEAD1D;
								}
							}
						}
					}

					.c-l-e-text {
						font-size: 20rpx;
						font-weight: 500;
						line-height: 1.2em;
						color: rgba($color: #000000, $alpha: 0.5);
					}
				}

				.c-l-end {
					display: flex;
					align-items: center;
					margin-top: 20rpx;

					.c-l-e-kp {
						flex: 1;
						display: flex;
						justify-content: center;
						align-items: center;

						.c-l-e-text {
							font-size: 24rpx;
							font-weight: 500;
							color: rgba($color: #000000, $alpha: 0.5);
							margin-left: 6rpx;
						}
					}
				}
			}
		}

		// 酒店评价信息列表
		.list-card {
			.uni-list-item__container {
				padding: 20rpx 0;
			}

			.l-c {
				width: 100%;
			}

			// 标题栏
			.l-c-top {
				display: flex;
				align-items: center;
				margin-bottom: 40rpx;

				.l-c-img {
					width: 60rpx;
					height: 60rpx;
					margin-right: 20rpx;
					border-radius: 30rpx;
					overflow: hidden;
				}

				.l-c-title {
					flex: 1;
					height: 60rpx;

					.l-c-name {
						display: flex;
						align-items: center;
						width: 100%;
						justify-content: space-between;
						margin-bottom: 10rpx;

						.l-c-text {
							font-size: 26rpx;
							font-weight: bold;
							color: #000000;
							margin-right: 50rpx;
						}

						.l-c-date {
							font-size: 24rpx;
							font-weight: 500;
							color: rgba($color: #000000, $alpha: 0.5);
						}
					}

					.l-c-iocn {
						display: flex;
						align-items: center;
						width: 100%;

						.l-c-i-img {
							width: 24rpx;
							height: 24rpx;
							margin-right: 10rpx;
						}
					}
				}
			}

			// 内容栏
			.l-c-con {
				display: flex;
				margin-bottom: 25rpx;
				margin-left: 10rpx;

				.l-c-c-text {
					font-size: 24rpx;
					font-weight: 500;
					line-height: 1.2em;
					color: rgba($color: #000000, $alpha: 0.7);
				}
			}

			// 底部标签栏
			.l-c-end {
				margin: 10rpx;
				display: flex;

				/deep/.uni-tag {
					color: #000;
					opacity: .7;
					border: 0;
					border-radius: 5rpx;
					font-family: -webkit-body;
					background-color: #f7f7f7;
					margin: 0rpx 20rpx 20rpx 0;
					border-radius: 5rpx !important;
				}
			}
		}
	}

	.zanWuXiaoxiImg {
		margin-top: 33%;
		text-align: center;

		image {
			width: 325rpx;
			height: 290rpx;
		}

		view {
			margin-top: 20rpx;
			color: #C1C1C1;
			font-weight: bold;
			font-size: 34rpx;
		}

	}
</style>
